<script setup>
import Editor from '@tinymce/tinymce-vue'
import {computed, onMounted, reactive, ref} from "vue";
import http from "@/utils/http";
import {deleteComment, getComment, saveComment} from "@/api/invoiceController.ts";
import {userStore} from "@/store/user.ts";
import {Message, Modal} from "@arco-design/web-vue";

const props = defineProps({
  count: {
    type: Number,
    default: 0
  },
  invoiceId: {
    type: [String, Number],
    default: ''
  }
})
const emit = defineEmits(['update:count'])
const imgRef = ref()
const imgUrl = ref('')
const editorRef = ref()
const initOption = ref({
  menubar: false,
  plugins: 'image',
  language:'zh_CN',//注意大小写
  images_upload_handler: function (blobInfo, progress) {
    return new Promise((resolve, reject) => {
      const file = blobInfo.blob();//转化为易于理解的file对象
      const formData1 = new FormData();
      formData1.append('file', file)
      http.post(`/file/uploadAsset`, formData1, {
        onUploadProgress: (e) => {
          progress(e.loaded / e.total * 100)
        }
      }).then(res => {
        console.log(res, 'res')
        resolve('/file/assets/' + res)
      }).catch(err => {
        reject(err)
      })
    })
  }
})
const content = ref('')
const currentUserId = computed(() => {
  return userStore().userInfo?.id ?? ''
})

const data = reactive({
  commentList: []
})

const submit = () => {
  console.log(editorRef.value)
  console.log(content.value, 'content')

  saveComment({
    invoiceId: props.invoiceId,
    content: content.value
  }).then(() => {
    content.value = ''
    getCommentList()
  })
}

const getCommentList = () => {
  getComment(props.invoiceId).then(res => {
    data.commentList = res
    emit('update:count', res.length)
  })
}

const handleRemoveComment = (id) => {
  Modal.confirm({
    title: '提示',
    content: '确定要删除该评论吗？',
    onOk: () => {
      deleteComment(id).then(res => {
        Message.success('删除评论成功')
        getCommentList()
      })
    }
  })
}

const contentMouseUp = (event) => {
  console.log(event, 'e')
  if (event.target.tagName === 'IMG') {
    imgUrl.value = event.target.src
    console.log(imgRef, 'imgRef')
    imgRef.value.onImgClick()
  }
}

onMounted(() => {
  getCommentList()
})
</script>

<template>
  <div class="comment-wrapper">
    <div class="comment-list">
      <div class="comment-item" v-for="item in data.commentList" :key="item.id">
        <a-avatar size="mini">{{ item.userName[0] }}</a-avatar>
        <span class="userName">{{ item.userName }}</span>
        <span class="time">{{ item.createTime }}</span>
        <span class="handle-button" v-if="item.userId === currentUserId">
          <a-button type="text" size="mini" @click="handleRemoveComment(item.id)">删除</a-button>
        </span>
        <div class="content" v-html="item.content" @mouseup="contentMouseUp"></div>
      </div>
    </div>
    <editor ref="editorRef" api-key="txr4hvfrx7y9rv044mwj2mx8iqltprgr44xexxz6wskond6t" :init="initOption" v-model="content"></editor>
    <a-button @click="submit" type="primary" class="submit-btn">提交</a-button>

    <!-- 用以放大图片预览 -->
    <a-image
        v-show="false"
        ref="imgRef"
        width="200"
        :src="imgUrl"
    />
  </div>
</template>

<style scoped lang="scss">
.comment-wrapper {
  padding: 20px 20px 50px;

  .submit-btn {
    float: right;
    margin-top: 20px;
  }

  .comment-list {
    .comment-item {
      margin-bottom: 20px;
      .userName {
        margin-left: 10px;
      }

      .time {
        color: var(--color-neutral-6);
        margin-left: 10px;
      }

      .content {
        margin-left: 20px;
        margin-top: 10px;
        padding: 10px 20px;
        border-radius: 8px;
        background-color: var(--color-neutral-2);

        :deep(img) {
          max-width: 100%;
        }
      }
    }
  }
}
</style>